<template>
  <el-drawer
    title="添加画像信息"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer factory-cust-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <el-form-item prop="groupName" label="画像名称">
            <el-input placeholder="请输入画像名称" v-model="editForm.groupName"></el-input>
          </el-form-item>
          <el-form-item prop="graphType" label="展示形式">
            <el-radio-group v-model="editForm.graphType">
              <el-radio label="bar">柱状图</el-radio>
              <el-radio label="stack">条形图</el-radio>
              <el-radio label="pie" :disabled="!!(editForm.subGrp && editForm.subGrp.labId)">饼状图</el-radio>
              <el-radio label="circle" :disabled="!!(editForm.subGrp && editForm.subGrp.labId)">环状图</el-radio>
              <!-- <el-radio label="line">折线图</el-radio> -->
              <el-radio label="heat" :disabled="!(editForm.subGrp && editForm.subGrp.labId)">热力图</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- mainGrp -->
          <el-row :class="{ 'grp-wrap': editForm.subGrp && editForm.subGrp.labId }">
            <el-form-item :label="editForm.subGrp && editForm.subGrp.labId ? '画像标签一' : '画像标签'">
              {{ editForm.mainGrp.tagNm }}
            </el-form-item>
            <el-form-item label="标签类型">
              {{ $dict('value_type')[editForm.mainGrp.valueType] }}
            </el-form-item>
            <!-- 枚举类型 -->
            <template v-if="editForm.mainGrp.groupTyp && !editForm.subGrp.labId">
              <el-form-item prop="mainGrp.enumType" label="枚举类型">
                <div class="enums-wrap">
                  <el-radio-group v-model="editForm.mainGrp.enumType">
                    <el-radio :label="1">全部枚举值</el-radio>
                    <el-radio :label="2"
                      >前
                      <el-form-item
                        prop="mainGrp.enumVal1"
                        :rules="{ required: editForm.mainGrp.enumType === 2, message: '数量不能为空', trigger: 'blur' }"
                      >
                        <el-input-number
                          v-model="editForm.mainGrp.enumVal1"
                          :disabled="editForm.mainGrp.enumType !== 2"
                          :min="1"
                          :step="1"
                          step-strictly
                        ></el-input-number>
                      </el-form-item>
                      个枚举值</el-radio
                    >
                    <el-radio :label="3"
                      >前
                      <el-form-item
                        prop="mainGrp.enumVal2"
                        :rules="{ required: editForm.mainGrp.enumType === 3, message: '数量不能为空', trigger: 'blur' }"
                      >
                        <el-input-number
                          v-model="editForm.mainGrp.enumVal2"
                          :disabled="editForm.mainGrp.enumType !== 3"
                          :min="1"
                          :max="100"
                          :step="1"
                          step-strictly
                        ></el-input-number> </el-form-item
                      >%枚举值</el-radio
                    >
                    <el-radio :label="4">
                      <el-form-item
                        prop="mainGrp.enumVal3"
                        :rules="{
                          required: editForm.mainGrp.enumType === 4,
                          message: '数量不能为空',
                          trigger: 'change'
                        }"
                      >
                        <el-button type="text" @click="$refs.factoryEnumsDrawer.showDrawer(editForm.mainGrp.enumVal3)"
                          >选择部分枚举值>></el-button
                        >
                      </el-form-item>
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </template>
            <!-- 非枚举，非标识类型 -->
            <el-form-item
              prop="mainGrp.groupTyp"
              label="分组规则"
              v-if="!editForm.mainGrp.groupTyp && editForm.mainGrp.valueType !== '3'"
            >
              <factory-range
                :target="editForm.mainGrp"
                field="mainGrp"
                @addRule="addRule"
                @removeRule="removeRule"
              ></factory-range>
            </el-form-item>
            <!-- 如果是数值型，增加求和选择 -->
            <template
              v-if="!editForm.subGrp.labId && (editForm.mainGrp.valueType == '6' || editForm.mainGrp.valueType == '7')"
            >
              <el-form-item prop="mainGrp.funcArray" label="统计选择">
                <el-checkbox-group v-model="editForm.mainGrp.funcArray">
                  <el-checkbox :label="1">和</el-checkbox>
                  <el-checkbox :label="2">平均值</el-checkbox>
                  <el-checkbox :label="3">最大值</el-checkbox>
                  <el-checkbox :label="4">最小值</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>
          </el-row>

          <!-- subGrp -->
          <template v-if="editForm.subGrp && editForm.subGrp.labId">
            <el-row class="grp-wrap">
              <span class="grp-handler">
                <el-tooltip effect="dark" content="删除画像标签二" placement="top">
                  <icon-svg name="iconDelete" @click.native="deteleSubGrp"></icon-svg>
                </el-tooltip>
              </span>
              <el-form-item label="画像标签二">
                {{ editForm.subGrp.tagNm }}
              </el-form-item>
              <el-form-item label="标签类型">
                {{ $dict('value_type')[editForm.subGrp.valueType] }}
              </el-form-item>
              <el-form-item
                prop="subGrp.groupTyp"
                label="分组规则"
                v-if="!editForm.subGrp.groupTyp && editForm.subGrp.valueType !== '3'"
              >
                <!-- 非枚举，非标识类型 -->
                <factory-range
                  :target="editForm.subGrp"
                  field="subGrp"
                  @addRule="addRule"
                  @removeRule="removeRule"
                ></factory-range>
              </el-form-item>
            </el-row>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" size="medium" @click="save">确定</el-button>
    </div>
    <factory-enums-drawer
      ref="factoryEnumsDrawer"
      :tagCode="editForm.mainGrp.labId"
      @callback="confirmEnums"
    ></factory-enums-drawer>
  </el-drawer>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import factoryEnumsDrawer from './factory-enums-drawer'
import factoryRange from './factory-cust-range'
export default {
  components: {
    factoryEnumsDrawer,
    factoryRange
  },
  data() {
    return {
      drawerVisible: false,
      editForm: {
        index: -1,
        groupName: '',
        graphType: 'bar',
        mainGrp: {
          labId: '',
          labFldMap: '',
          groupTyp: '',
          tagNm: '',
          labGrps: [],
          rangeInfo: {},
          labTbl: '',
          valueType: '',
          enums: '',
          enumType: 1,
          enumVal1: 1,
          enumVal2: 1,
          enumVal3: [],
          funcArray: []
        },
        subGrp: {
          labId: '',
          labFldMap: '',
          groupTyp: '',
          tagNm: '',
          labGrps: [],
          rangeInfo: {},
          labTbl: '',
          valueType: '',
          enums: ''
        }
      },
      editFormRules: {
        groupName: [{ required: true, message: '画像名称不能为空', trigger: 'blur' }],
        graphType: [{ required: true, message: '展示形式不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(oldtag) {
      let tag = cloneDeep(oldtag)
      this.editForm.mainGrp.labId = tag.mainGrp.tagCode
      this.editForm.mainGrp.labFldMap = tag.mainGrp.labFldMap
      this.editForm.mainGrp.groupTyp = tag.mainGrp.valueType.toString() === '1'
      this.editForm.mainGrp.tagNm = tag.mainGrp.tagNm
      this.editForm.mainGrp.labTbl = tag.mainGrp.labTbl
      this.editForm.mainGrp.valueType = tag.mainGrp.valueType.toString()
      this.editForm.mainGrp.enums = tag.mainGrp.enums
      this.editForm.mainGrp.enumType = tag.mainGrp.enumType || 1
      if (tag.mainGrp.enumType === 2) this.editForm.mainGrp.enumVal1 = tag.mainGrp.enumVal
      else if (tag.mainGrp.enumType === 3) this.editForm.mainGrp.enumVal2 = tag.mainGrp.enumVal
      else if (tag.mainGrp.enumType === 4) this.editForm.mainGrp.enumVal3 = tag.mainGrp.enumVal
      if (tag.type === 'edit') {
        this.editForm.groupName = tag.mainGrp.groupName
        this.editForm.mainGrp.labGrps = tag.mainGrp.labGrps
        this.editForm.mainGrp.rangeInfo = tag.mainGrp.rangeInfo
        this.editForm.graphType = tag.mainGrp.graphType
      } else {
        this.editForm.groupName = this.editForm.mainGrp.tagNm
        if (!this.editForm.mainGrp.groupTyp) {
          this.editForm.mainGrp.labGrps.push({
            valLft: '',
            valRit: ''
          })
        }
      }
      if (tag.subGrp && tag.subGrp.tagCode) {
        this.editForm.subGrp.labId = tag.subGrp.tagCode
        this.editForm.subGrp.labFldMap = tag.subGrp.labFldMap
        this.editForm.subGrp.groupTyp = tag.subGrp.valueType.toString() === '1'
        this.editForm.subGrp.tagNm = tag.subGrp.tagNm
        this.editForm.subGrp.labTbl = tag.subGrp.labTbl
        this.editForm.subGrp.valueType = tag.subGrp.valueType.toString()
        this.editForm.subGrp.enums = tag.subGrp.enums
        this.editForm.subGrp.labGrps = tag.subGrp.labGrps
        this.editForm.subGrp.rangeInfo = tag.subGrp.rangeInfo
        if (!this.editForm.subGrp.groupTyp && !this.editForm.subGrp.labGrps.length) {
          this.editForm.subGrp.labGrps.push({
            valLft: '',
            valRit: ''
          })
        }
        if (this.editForm.graphType === 'pie' || this.editForm.graphType === 'circle') this.editForm.graphType = 'bar'
      } else {
        if ((tag.mainGrp.valueType == '6' || tag.mainGrp.valueType == '7') && tag.numGrp) {
          this.editForm.mainGrp.funcArray = tag.numGrp.funcArray
        }
      }
      this.editForm.index = tag.index
      this.drawerVisible = true
    },
    addRule(field, index) {
      this.editForm[field].labGrps.splice(index, 0, {
        valLft: index >= 0 ? this.editForm[field].labGrps[index - 1].valRit : '',
        valRit: ''
      })
      this.$forceUpdate()
    },
    removeRule(field, index) {
      this.editForm[field].labGrps.splice(index, 1)
      this.$forceUpdate()
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (
            (!this.editForm.mainGrp.groupTyp &&
              this.editForm.mainGrp.valueType !== '3' &&
              this.editForm.mainGrp.labGrps.length <= 1 &&
              this.editForm.mainGrp.labGrps[0].valLft === '-' &&
              this.editForm.mainGrp.labGrps[0].valRit === '+') ||
            (this.editForm.subGrp.labId &&
              !this.editForm.subGrp.groupTyp &&
              this.editForm.subGrp.valueType !== '3' &&
              this.editForm.subGrp.labGrps.length <= 1 &&
              this.editForm.subGrp.labGrps[0].valLft === '-' &&
              this.editForm.subGrp.labGrps[0].valRit === '+')
          ) {
            this.$message.error('不能统计-∞到+∞的区间值！')
            return
          }
          let result = {
            grpId: Number(this.editForm.index),
            mainGrp: {
              labId: this.editForm.mainGrp.labId,
              labFldMap: this.editForm.mainGrp.labFldMap,
              groupTyp: this.editForm.mainGrp.groupTyp || this.editForm.mainGrp.valueType === '3' ? 'enum' : 'other',
              groupName: this.editForm.groupName,
              tagNm: this.editForm.mainGrp.tagNm,
              valueType: this.editForm.mainGrp.valueType,
              graphType: this.editForm.graphType,
              labTbl: this.editForm.mainGrp.labTbl,
              rangeInfo: {},
              labGrps: [],
              enums: this.editForm.mainGrp.enums
            }
          }
          if (this.editForm.mainGrp.groupTyp) {
            result.mainGrp.enumType = this.editForm.mainGrp.enumType
            result.mainGrp.enumVal =
              this.editForm.enumType === 1 ? '' : this.editForm.mainGrp[`enumVal${this.editForm.mainGrp.enumType - 1}`]
          }
          if (!this.editForm.mainGrp.groupTyp && this.editForm.mainGrp.valueType !== '3') {
            this.editForm.mainGrp.labGrps.forEach((item, index) => {
              const valLft =
                this.editForm.mainGrp.valueType == '7' && typeof item.valLft == 'number'
                  ? item.valLft.toFixed(2)
                  : item.valLft
              const valRit =
                this.editForm.mainGrp.valueType == '7' && typeof item.valRit == 'number'
                  ? item.valRit.toFixed(2)
                  : item.valRit
              result.mainGrp.labGrps.push({
                code: index,
                oprator: 'a<=x<b',
                val: '',
                valLft: valLft,
                valRit: valRit
              })
              result.mainGrp.rangeInfo[index] = valLft + ' ~ ' + valRit
            })
          }
          if (this.editForm.subGrp.labId) {
            result.subGrp = {
              labId: this.editForm.subGrp.labId,
              labFldMap: this.editForm.subGrp.labFldMap,
              groupTyp: this.editForm.subGrp.groupTyp || this.editForm.subGrp.valueType === '3' ? 'enum' : 'other',
              groupName: this.editForm.groupName,
              tagNm: this.editForm.subGrp.tagNm,
              valueType: this.editForm.subGrp.valueType,
              graphType: this.editForm.graphType,
              labTbl: this.editForm.subGrp.labTbl,
              rangeInfo: {},
              labGrps: [],
              enums: this.editForm.subGrp.enums
            }
            if (!this.editForm.subGrp.groupTyp && this.editForm.subGrp.valueType !== '3') {
              this.editForm.subGrp.labGrps.forEach((item, index) => {
                const valLft =
                  this.editForm.subGrp.valueType == '7' && typeof item.valLft == 'number'
                    ? item.valLft.toFixed(2)
                    : item.valLft
                const valRit =
                  this.editForm.subGrp.valueType == '7' && typeof item.valRit == 'number'
                    ? item.valRit.toFixed(2)
                    : item.valRit
                result.subGrp.labGrps.push({
                  code: index,
                  oprator: 'a<=x<b',
                  val: '',
                  valLft: valLft,
                  valRit: valRit
                })
                result.subGrp.rangeInfo[index] = valLft + ' ~ ' + valRit
              })
            }
          } else {
            if (
              (this.editForm.mainGrp.valueType === '6' || this.editForm.mainGrp.valueType === '7') &&
              this.editForm.mainGrp.funcArray.length
            ) {
              result.numGrp = {
                labId: this.editForm.mainGrp.labId,
                funcArray: this.editForm.mainGrp.funcArray
              }
            }
          }
          this.$emit('callback', result)
          this.beforeClose()
        }
      })
    },
    deteleSubGrp() {
      this.$confirm('确定删除画像标签二？').then(() => {
        this.editForm.subGrp = {
          labId: '',
          labFldMap: '',
          groupTyp: '',
          tagNm: '',
          labGrps: [],
          rangeInfo: {},
          labTbl: '',
          valueType: '',
          enums: ''
        }
        if (this.editForm.graphType === 'heat') this.editForm.graphType = 'bar'
      })
    },
    confirmEnums(enums) {
      this.editForm.mainGrp.enumType = 4
      this.editForm.mainGrp.enumVal3 = enums
    },
    clearForm() {
      this.editForm = {
        index: -1,
        groupName: '',
        graphType: 'bar',
        mainGrp: {
          labId: '',
          labFldMap: '',
          groupTyp: '',
          tagNm: '',
          labGrps: [],
          rangeInfo: {},
          labTbl: '',
          valueType: '',
          enums: '',
          enumType: 1,
          enumVal1: 1,
          enumVal2: 1,
          enumVal3: [],
          funcArray: []
        },
        subGrp: {
          labId: '',
          labFldMap: '',
          groupTyp: '',
          tagNm: '',
          labGrps: [],
          rangeInfo: {},
          labTbl: '',
          valueType: '',
          enums: ''
        }
      }
    },
    beforeClose() {
      this.clearForm()
      this.$refs.editForm.clearValidate()
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
.factory-cust-drawer {
  .rules + .rules {
    margin-top: 20px;
  }
  .button-col {
    min-height: 1px;
    line-height: 40px;
    .el-button.is-circle {
      padding: 3px;
      .icon-svg {
        font-size: 16px;
      }
    }
  }
  .enums-wrap {
    .el-radio-group {
      width: 100%;
    }
    .el-radio {
      .el-form-item {
        display: inline-block;
      }
      .el-input-number {
        width: 100px;
      }
      .el-input__inner {
        padding: 0;
      }
    }
  }
  .grp-wrap {
    border: 1px dotted #ddd;
    margin-bottom: 10px;
    position: relative;
    .grp-handler {
      position: absolute;
      top: 5px;
      right: 5px;
      color: #ee6861;
      cursor: pointer;
      z-index: 100;
    }
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    display: none;
  }
}
</style>
